<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Adminique - admin template</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/skins/gray.css" title="gray">

<link rel="alternate stylesheet" type="text/css" href="css/skins/orange.css" title="orange">
<link rel="alternate stylesheet" type="text/css" href="css/skins/red.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="css/skins/green.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="css/skins/purple.css" title="purple">
<link rel="alternate stylesheet" type="text/css" href="css/skins/yellow.css" title="yellow">
<link rel="alternate stylesheet" type="text/css" href="css/skins/black.css" title="black">
<link rel="alternate stylesheet" type="text/css" href="css/skins/blue.css" title="blue">

<link rel="stylesheet" type="text/css" href="css/superfish.css">
<link rel="stylesheet" type="text/css" href="css/uniform.default.css">
<link rel="stylesheet" type="text/css" href="css/jquery.wysiwyg.css">
<link rel="stylesheet" type="text/css" href="css/facebox.css">
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.8.custom.css">

<!--[if lte IE 8]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<![endif]-->

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Delicious_500.font.js"></script>
<script type="text/javascript" src="js/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/facebox.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>

</head>
<body>
<header id="top">
	<div class="container_12 clearfix">
		<div id="logo" class="grid_5">
			<!-- replace with your website title or logo -->
			<a id="site-title" href="dashboard.html"><span>Admin</span>ique</a>			
		</div>
		
		<div class="grid_4" id="colorstyle">			
			<a href="#" rel="blue"></a>
			<a href="#" rel="green"></a>
			<a href="#" rel="red"></a>
			<a href="#" rel="purple"></a>
			<a href="#" rel="orange"></a>
			<a href="#" rel="yellow"></a>
			<a href="#" rel="black"></a>
			<a href="#" rel="gray"></a>
		</div>

		<div id="userinfo" class="grid_3">
			<a href="#">Administrator</a>
		</div>
	</div>
</header>

<nav id="topmenu">
	<div class="container_12 clearfix">
		<div class="grid_12">
			<ul id="mainmenu" class="sf-menu">
				<li><a href="dashboard.html">Dashboard</a></li>
				<li><a href="styles.html">Styles</a></li>
				<li><a href="tables.html">Tables</a></li>
				<li class="current"><a href="forms.html">Forms</a></li>
				<li><a href="#">Sample Pages</a>
					<ul>
						<li><a href="news.html">News</a></li>
						<li><a href="gallery.html">Photo Gallery</a></li>
						<li><a href="settings.html">Settings</a></li>
						<li><a href="login.html">Login</a></li>
					</ul>
				</li>
				<li><a href="#">Layout Width</a>
					<ul id="layoutwidth">
						<li><a href="#" rel="fixed">Fixed</a></li>
						<li><a href="#" rel="fluid">Fluid</a></li>
					</ul>
				</li>
			</ul>
			<ul id="usermenu">
				<li><a href="#" class="inbox">Inbox (3)</a></li>
				<li><a href="#">Logout</a></li>
			</ul>
		</div>
	</div>
</nav>

<section id="content">
	<section class="container_12 clearfix">
		<section id="main" class="grid_9 push_3">
			<article>
				<h1>Forms</h1>
				<h2>Form Elements</h2>
				<form id="myForm" class="uniform" method="post">
					<fieldset>
						<legend>Legend</legend>
						<dl class="inline">
							<dt><label for="name">Input Text</label></dt>
							<dd>
								<input type="text" id="name" class="medium required" size="50" />
								<small>This is an input description</small>
							</dd>

							<dt><label for="password">Input Password</label></dt>
							<dd><input type="password" id="password" class="medium required" /></dd>

							<dt><label for="select1">Select</label></dt>
							<dd>
								<select size="1" id="select1" class="medium required">
									<option value="option1">Option 1</option>
									<option value="option2">Option 2</option>
									<option value="option3">Option 3</option>
									<option value="option4">Option 4</option>
								</select>
							</dd>

							<dt><label for="select2">Multiple Select</label></dt>
							<dd>
								<select size="4" id="select2" class="medium" multiple="multiple">
									<option value="option1">Option 1</option>
									<option value="option2">Option 2</option>
									<option value="option3">Option 3</option>
									<option value="option4">Option 4</option>
								</select>
								<small>Use ctrl+click to select multiple options</small>
							</dd>
						</dl>
					</fieldset>
					<fieldset>
						<legend>Legend</legend>
						<dl class="inline">
							<dt><label>Radio</label></dt>
							<dd>
								<label><input type="radio" name="radio" value="radio1" />Radio 1</label>
								<label><input type="radio" name="radio" value="radio2" />Radio 2</label>
							</dd>

							<dt><label>Checkbox</label></dt>
							<dd>
								<label><input type="checkbox" name="cb" value="checkbox1" />Checkbox 1</label>
								<label><input type="checkbox" name="cb" value="checkbox2" />Checkbox 2</label>
								<label><input type="checkbox" name="cb" value="checkbox3" />Checkbox 3</label>
							</dd>

							<dt><label for="upload">File</label></dt>
							<dd><input type="file" id="upload" /></dd>

							<dt><label for="dob">Date</label></dt>
							<dd>
								<input type="text" name="dob" id="dob" maxlength="10" class="small" />
							</dd>

							<dt><label for="comments">Textarea</label></dt>
							<dd><textarea id="comments" class="medium"></textarea></dd>

							<dt><label for="wysiwyg">HTML Editor</label></dt>
							<dd><textarea id="wysiwyg" class="medium" rows="6"></textarea></dd>
						</dl>
						<div class="buttons">
							<button type="submit" class="button">Submit Button</button>
							<button type="button" class="button white">Cancel Button</button>
						</div>
					</fieldset>
				</form>
				<h2>Message Boxes</h2>
				
				<div class="success msg">
				This is a success message. Click to close.
				</div>
				
				<div class="error msg">
				This is an error message. Click to close.
				</div>
				
				<div class="warning msg">
				This is a warning message. Click to close.
				</div>
				
				<div class="information msg">
				This is an information message. Click to close.
				</div>
			</article>
			<article class="buttons">
				<h1>Buttons</h1>
				
				<h2>Standard Buttons</h2>
				<section class="buttons">
					<button class="button blue">Blue Button</button>
					<button class="button green">Green Button</button>
					<button class="button red">Red Button</button>
					<button class="button purple">Purple Button</button>
					<button class="button orange">Orange Button</button>
					<button class="button yellow">Yellow Button</button>
					<button class="button black">Black Button</button>
					<button class="button gray">Gray Button</button>
					<button class="button white">White Button</button>
				</section>
				
				<h2>Small Buttons</h2>
				<section class="buttons">
					<button class="button small blue">Blue Button</button>
					<button class="button small green">Green Button</button>
					<button class="button small red">Red Button</button>
					<button class="button small purple">Purple Button</button>
					<button class="button small orange">Orange Button</button>
					<button class="button small yellow">Yellow Button</button>
					<button class="button small black">Black Button</button>
					<button class="button small gray">Gray Button</button>
					<button class="button small white">White Button</button>
				</section>
				
				<h2>Big Buttons</h2>
				<section class="buttons">
					<button class="button big blue">Blue Button</button>
					<button class="button big green">Green Button</button>
					<button class="button big red">Red Button</button>
					<button class="button big purple">Purple Button</button>
					<button class="button big orange">Orange Button</button>
					<button class="button big yellow">Yellow Button</button>
					<button class="button big black">Black Button</button>
					<button class="button big gray">Gray Button</button>
					<button class="button big white">White Button</button>
				</section>
			</article>
		</section>
		
		<aside id="sidebar" class="grid_3 pull_9">
			<div class="box search">
				<form>
					<label for="s">Search:</label>
					<input id="s" type="text" size="20" />
					<button class="button small">Go</button>
				</form>
			</div>
			<div class="box menu">
				<h2>Side Menu</h2>
				<section>
					<ul>
						<li><a href="#">Menu Item 1</a></li>
						<li><a href="#">Menu Item 2</a></li>
						<li><a href="#">Menu Item 3</a></li>
						<li><a href="#">Menu Item 4</a></li>
						<li><a href="#">Menu Item 5</a>
							<ul>
								<li><a href="#">Menu Item 5.1</a></li>
								<li><a href="#">Menu Item 5.2</a>
									<ul>
										<li><a href="#">Menu Item 5.2.1</a></li>
										<li><a href="#">Menu Item 5.2.2</a></li>
									</ul>
								</li>
								<li><a href="#">Menu Item 5.3</a></li>
							</ul>
						</li>
						<li><a href="#">Menu Item 6</a></li>
					</ul>
				</section>
			</div>
			<div class="box info">
				<h2>Info</h2>
				<section>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</section>
			</div>
			<div class="box">
				<h2>Lorem Ipsum</h2>
				<section>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</section>
			</div>
		</aside>
	</section>
</section>

<footer id="bottom">
	<section class="container_12 clearfix">
		<div class="grid_6">
			<a href="#">Menu 1</a>
			&middot; <a href="#">Menu 2</a>
			&middot; <a href="#">Menu 3</a>
			&middot; <a href="#">Menu 4</a>
		</div>
		<div class="grid_6 alignright">
			Copyright &copy; 2011 <a href="#">YourCompany.com</a>
		</div>
	</section>
</footer>

</body>
</html>
